<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/blood.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">登陆</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <h3>登陆</h3>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="username">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password">
                </div>
                <div class="row">
                    <span>验证码:</span>
                    <input id="identify-input" type="text" name="identifyCode">
                    <img id="identify-img" src="/user/identifyImage"><br><br>
                </div>

                <div class="row">
                    <button id="submit" onclick="logsub()">提交</button>
                </div>
                <div class="row">
                    <a href="reg.html">注册</a>
                </div>
        </div>
    </div>
</body>
<script>
     function logsub(){

         var username=jQuery("#username");
         var password=jQuery("#password");
          var idcode=jQuery("#identify-input");
         if(username.val() == ""){
             alert("请输入用户名");
             username.focus();
             return false;
         }
         if(password.val() == ""){
             alert("请输入密码");
             password.focus();
             return false;
         }
         if(idcode.val() == ""){
             alert("请输入验证码");
             return false;
         }
         jQuery.ajax({
             url:"/user/login",
             method:"POST",
             dataType:"json",
             data:{
                 "username":username.val(),
                 "password":password.val(),
                 "identifyCode":idcode.val()
             },
             success: function (result){
                 if(result.code == 200 && result.data!=-1){
                     alert("登陆成功，即将进入个人主页");
                     location.href="myblog_list.html";
                 }else {
                     alert("请输入正确的用户名或密码");
                     username.focus();
                 }
             }
         });
     }

     $("#identify-img").on('click',function (){
         // 点击验证码那个图片的时候，我们输入的验证码那个框就会清空
         $('#identify-input').val('')
         //而且我们点击验证码的时候，希望它可以改变验证码内容，其实是通过发送新请求来改变验证码内容
         $('#identify-img').attr('src','/user/identifyImage?'+Math.random());

     });


</script>

</html>